<template>
  <section>
    <van-sticky>
      <PageHeader title="审核管理"/>
    </van-sticky>

    <van-tabs v-model="type" sticky scrollspy @change="onTabChange">
      <van-tab title="婚姻" name="marriage"></van-tab>
      <van-tab title="学历" name="education"></van-tab>
      <van-tab title="房产" name="house"></van-tab>
      <van-tab title="汽车" name="car"></van-tab>
      <van-tab title="会员头像" name="user_avatar"></van-tab>
      <van-tab title="形象照" name="member_photo"></van-tab>
      <van-tab title="会员照片" name="member_image">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="requestData">
          <div class="flex flex-col md10 bg-color-white pd10 mb10 auth-item" v-for="(item, index) in dataList" :key="index">
            <div class="flex flex-row flex-centerV">
              <img :src="item.user.avatar_url ? item.user.avatar_url : BASE_STATIC_URL + 'images/mp/avatar.jpeg'" class="flex avatar" />
              <div class="flex flex-row flex-left flex-1 pl10 font-common">{{item.user.nick}}</div>
            </div>

            <div class="flex flex-row flex-center mt5">
              <img :src="item.file_url" class="w100" @click="showPic(item.file_url)" />
            </div>

            <div class="flex flex-row flex-center pt10 mt10 pb10 border-top-gray font-common">
              <div class="flex flex-row flex-center flex-1 border-right-gray">
                <i class="iconfont icon-tongguo" @click="showPic('data:image/png;base64,' + item.idcard_front_img)">身份证</i>
              </div>

              <div class="flex flex-row flex-center flex-1 border-right-gray">
                <i class="iconfont icon-tongguo" @click="approve(index)">通过</i>
              </div>

              <div class="flex flex-row flex-center flex-1">
                <i class="iconfont icon-weitongguo" @click="reject(index)">不通过</i>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
import PageHeader from "../../componets/PageHeader";
import {ImagePreview, Toast} from "vant";
import {
  BASE_STATIC_URL, memberAuthMemberImageApproveUri, memberAuthMemberImageListUri, memberAuthMemberImageRejectUri
} from "../../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      type: 'member_image',
      BASE_STATIC_URL: BASE_STATIC_URL,
      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],
    }
  },
  methods: {
    onTabChange(name) {
      if(name == 'user_avatar') {
        this.$router.replace({name: 'MemberAuthUserAvatar'});
      } else if(name == 'member_photo') {
        this.$router.replace({name: 'MemberAuthMemberPhoto'});
      } else {
        this.$router.replace({name: 'MemberAuthLists'});
      }
    },
    showPic(picUrl) {
      ImagePreview([picUrl]);
    },
    requestData() {
      const that = this;
      this.loading = true;
      const url = memberAuthMemberImageListUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    },
    approve(index) {
      const that = this;
      const url = memberAuthMemberImageApproveUri + '?image_id=' + that.dataList[index].id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast.fail(msg);
        } else {
          that.dataList.splice(index, 1);
        }
      }, response => {
        // error callback
      })
    },
    reject(index) {
      const that = this;
      const url = memberAuthMemberImageRejectUri + '?image_id=' + that.dataList[index].id;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          Toast.fail(msg);
        } else {
          that.dataList.splice(index, 1);
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {

  }
}
</script>

<style scoped>
.auth-item .avatar {
  height: 20px;
  width: 20px;
  border-radius: 10px;
}
</style>
